<template>
<div class="home-module">
  <img src="/static/images/home/icon_five.png" alt="" v-show="showTitle">
  <div class="wrap2">
    <router-link :to="{ name: 'proDetail', query: {proId: p.id} }" class="pro" v-for="(p,index) in proList" :key="index">
      <img v-lazy="'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/'+p.pic" />
      <div class="pro-content">
        <span class="name">{{p.name}}</span>
        <!-- <span class="couqon-price">劵{{p.price}}</span> -->
        <!-- <span class="desc">{{p.desc}}</span> -->
        <span class="sale-price">
            <!-- <em>劵后价</em> -->
            <b>￥{{p.cash}}</b>
            <!-- <s>{{p.oldPrice}}</s> -->
          </span>

      </div>
    </router-link>
  </div>

</div>
</template>

<script>
export default {
  props:['proList','show-title']
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.home-module {
    img {
        width: 100%;
        background-size: cover;
    }
    .wrap2 {
        background-color: #f2f2f2;
        margin: px2rem(10px) 0 px2rem(100px) 0;
        // padding: px2rem(8px);
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        justify-content: space-between;
        .pro {
            &:nth-child(2n+2) {
                width: calc(49% - 5px);
                margin: 5px 5px 5px 0;
            }
            &:nth-child(1) {
                margin: 0 5px 5px;
            }
            &:nth-child(2) {
                margin: 0 5px 5px 0;
            }
            background-color: #fff;
            width: calc(49% - 5px);
            margin: 5px;
            // border: 3px solid #f2f2f2;
            float: left;
            box-sizing: border-box;
            padding-bottom: px2rem(10px);
            border-radius: px2rem(5px);
            -moz-box-shadow: 0 1px 1px #c2c2c2;
            -webkit-box-shadow: 0 1px 1px #c2c2c2;
            box-shadow: 0 1px 1px #c2c2c2;
            > img {
                height: auto;

            }
            > .pro-content {
                margin-left: px2rem(10px);
                .name {
                    @include font-dpr(14px);
                    line-height: px2rem(30px);
                    color: black;
                    font-weight: bolder;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                }
                .couqon-price {
                    display: block;
                    @include font-dpr(12px);
                    color: red;
                    background: rgb(240, 216, 211);
                    margin-top: px2rem(10px);
                    width: px2rem(160px);
                    min-width: px2rem(160px);
                    height: px2rem(35px);
                    line-height: px2rem(35px);
                    text-align: center;
                    // border-radius: px2rem(15px);
                }
                .sale-price {
                    display: block;
                    overflow: hidden;
                    margin-top: px2rem(10px);
                    // em {
                    //     color: red;
                    //     font-size: px2rem(14px);
                    // }
                    b {
                        color: #da3142;
                        @include font-dpr(14px);
                        font-weight: bold;
                    }
                    // s {
                    //     color: #999;
                    //     @include font-dpr(14px);
                    // }
                }
                .desc {
                    display: block;
                    overflow: hidden;
                    @include font-dpr(12px);
                    color: #666;
                    margin-top: px2rem(10px);
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }
        }

    }
}
</style>
